<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <template #header>
          <el-button @click="back"> 返回 </el-button>
        </template>
        <div>
          <!-- 培训详情 -->
          <el-descriptions
            title="培训详情"
            :column="1"
            :labelStyle="labelStyle"
            border
          >
            <el-descriptions-item label="培训主题">{{
              skInfo.title
            }}</el-descriptions-item>
            <el-descriptions-item label="培训内容">{{
              skInfo.content
            }}</el-descriptions-item>
            <el-descriptions-item label="培训开始时间">{{
              skInfo.startTime
            }}</el-descriptions-item>
            <el-descriptions-item label="培训结束时间">{{
              skInfo.endTime
            }}</el-descriptions-item>
            <el-descriptions-item label="培训地点">{{
              skInfo.site
            }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{
              skInfo.remark
            }}</el-descriptions-item>
          </el-descriptions>
          <!-- 二维码 -->
          <el-descriptions
            title="签到二维码"
            style="margin-top: 20px"
          ></el-descriptions>
          <div class="image-preview">
            <el-image
              v-if="skInfo.qrCode"
              :src="baseUrl + skInfo.qrCode"
              :preview-src-list="srcList"
              @click="setPreviewImg(skInfo.qrCode)"
            >
            </el-image>
            <el-empty v-else description="暂无数据"></el-empty>
          </div>
          <!-- 图文记录 -->
          <el-descriptions
            title="现场图文记录"
            style="margin-top: 20px"
            :column="1"
            :labelStyle="labelStyle"
            border
          >
            <template slot="extra">
              <el-button type="primary" size="small" @click="upload"
                >现场情况上传</el-button
              >
            </template>
            <el-descriptions-item label="现场情况">{{
              skInfo.sceneSituation
            }}</el-descriptions-item>
            <el-descriptions-item label="现场图片">
              <el-image
                v-if="skInfo.scenePhoto"
                style="width: 100%"
                :src="baseUrl + skInfo.scenePhoto"
                :preview-src-list="srcList"
                @click="setPreviewImg(skInfo.scenePhoto)"
              >
              </el-image>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-descriptions-item>
          </el-descriptions>

          <!-- 现场直播地址 -->
          <el-descriptions
            title="视频直播(双击全屏观看)"
            style="margin-top: 20px"
            :column="1"
            :labelStyle="labelStyle"
            border
          >
            <el-descriptions-item label="现场直播">
              <iframe
                v-if="skInfo.videoUrl"
                :src="iframeUrl"
                width="600"
                height="400"
                id="ysOpenDevice"
                allowfullscreen
              ></iframe>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-descriptions-item>
          </el-descriptions>

          <!-- 现场情况上传 -->
          <el-dialog title="现场情况" :visible.sync="dialogVisible">
            <el-form :model="form" label-width="80px">
              <el-form-item label="现场情况">
                <el-input
                  type="textarea"
                  :rows="2"
                  v-model="form.sceneSituation"
                ></el-input>
              </el-form-item>
              <el-form-item label="现场图片">
                <el-upload
                  ref="sceneImg"
                  :limit="1"
                  :action="url"
                  :headers="headers"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog :visible.sync="previewImg">
            <img width="100%" :src="dialogImageUrl" />
          </el-dialog>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <template #header>
          <span style="line-height: 40px"> 培训签到记录 </span>
        </template>
        <div v-if="signList.length !== 0">
          <template v-for="item in signList">
            <div :key="item.id" style="margin-bottom: 20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="签到人"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.userName }}
                </el-descriptions-item>
                <el-descriptions-item label="签到时间">
                  {{ item.createTime }}
                </el-descriptions-item>
                <el-descriptions-item label="签到图片">
                  <el-image
                    v-if="item.photo"
                    class="previewImg"
                    fit="cover"
                    :src="baseUrl + item.photo"
                    :preview-src-list="srcList"
                    @click="setPreviewImg(item.photo)"
                  >
                  </el-image>
                  <el-empty v-else description="暂无数据"></el-empty
                ></el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
          <div style="text-align: center">
            <el-pagination
              style="display: inline"
              background
              layout="total, prev, pager, next"
              :page-size="5"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "skillDetail",
  props: ["sid"],
  created() {
    this.getSkillInfo();
    this.getSignList();
  },
  data() {
    return {
      iframeUrl: null,
      skInfo: {},
      form: {
        sceneSituation: "",
        scenePhoto: "",
      },
      fileList: [],
      labelStyle: {
        width: "110px",
        textAlign: "center",
      },
      url: window.api.uploadUrl1,
      headers: {
        userRole: "ADMIN",
        token: sessionStorage.getItem("token"),
      },
      total: 1,
      pageIndex: 1,
      userSign: [],
      baseUrl: window.api.image + "/",
      srcList: [],
      signList: [],
      dialogVisible: false,
      previewImg: false,
      dialogImageUrl: "",
    };
  },
  methods: {
    getSkillInfo() {
      let id = this.sid;
      this.API.getSkillTrainingById({ id }).then((ret) => {
        this.iframeUrl =
          "https://open.ys7.com/ezopen/h5/iframe?url=" +
          (ret.data.videoUrl || "") +
          "&autoplay=1&accessToken=" +
          (ret.data.token || "");
        this.skInfo = ret.data;
      });
    },
    upload() {
      this.dialogVisible = true;
    },
    save() {
      this.$confirm("确认保存?", "提示", {
        type: "success",
      }).then(() => {
        let body = Object.assign(this.form, this.skInfo);
        this.API.updateSceneImageTextRecord({ body }).then((res) => {
          this.dialogVisible = false;
          this.success("保存成功");
          this.getSkillInfo();
        });
      });
    },
    handleSuccess({ value }) {
      this.form.scenePhoto = value;
      this.isShowUploadBtn(false);
    },
    handleRemove() {
      this.form.scenePhoto = "";
      this.isShowUploadBtn(true);
    },
    isShowUploadBtn(bool) {
      let p = this.$refs["sceneImg"].$el;
      let b = p.getElementsByClassName("el-upload")[0];
      b.style.display = bool ? "block" : "none";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.previewImg = true;
    },
    // 返回列表页
    back() {
      this.$emit("back");
    },
    // 图片阅览
    setPreviewImg(url) {
      this.srcList = [this.baseUrl + url];
    },
    // 获取签到列表
    getSignList() {
      this.API.getSkillTrainingSignPageList({
        pageIndex: this.pageIndex,
        pageSize: 5,
        trainingId: this.sid,
      }).then((res) => {
        this.signList = res.data.records;
        this.total = res.data.total;
      });
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getSignList();
    },
  },
};
</script>

<style scoped>
.image-preview {
  text-align: center;
  border: 1px solid #ebeef5;
  padding: 12px 10px;
}
.previewImg {
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
</style>
